<template>
  <div class="message">
    <a-space>
      <a-button @click="info">Info</a-button>
      <a-button @click="success">Success</a-button>
      <a-button @click="error">Error</a-button>
      <a-button @click="warning">Warning</a-button>
      <a-button @click="confirm">Modal</a-button>
    </a-space>
    <h1>概述</h1>
    <div>
      <div>可提供成功、警告和错误等反馈信息。</div>
      <div>顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。</div>
      <div>使用方法:message.info('提示信息')。</div>
      <div>info用于正常提示信息</div>
      <div>success用于成功提示信息，例：接口请求成功</div>
      <div>error用于错误提示信息，例：接口请求成功</div>
      <div>warning用于提醒提示信息，例：表单提示</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { CheckCircleOutlined } from '@ant-design/icons-vue';
  import { ref, createVNode } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { useModal } from '@/hooks/useModal/';
  const [UseModalComp] = useModal();

  const info = () => {
    message.info('用于页面中展示重要的提示信息，用于页面中展示重要的提示信息');
  };
  const success = () => {
    message.success('用于页面中展示重要的提示信息，用于页面中展示重要的提示信息');
  };
  const error = () => {
    message.error('用于页面中展示重要的提示信息，用于页面中展示重要的提示信息');
  };
  const warning = () => {
    message.warning('用于页面中展示重要的提示信息，用于页面中展示重要的提示信息');
  };

  const confirm = () => {
    Modal.info({
      title: '成功提示',
      icon: createVNode(CheckCircleOutlined),
      content:
        '用于页面中展示重要的提示信息，用于页面中展示重要的提示信息，用于页面中展示重要的提示信息',
      footer: null,
      closable: true,
    });
    // UseModalComp.show({
    //   title: '成功提示',
    //   content:
    //     '用于页面中展示重要的提示信息，用于页面中展示重要的提示信息，用于页面中展示重要的提示信息',
    // });
  };
</script>
<style lang="less" scoped>
  .message {
    padding: 50px;
  }

  h1 {
    margin-top: 20px;
    font-size: 30px;
    font-weight: 600;
  }

  div {
    line-height: 22px;
  }
</style>
